<template>
  <div class="container">
    <div class="content-aside">
      <el-menu
        :default-active="activeMenu"
        :default-openeds="openedKeys"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-submenu v-for="item in directoryList" :key="item.id" :index="'submenu-' + item.id">
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="chartitem in item.chapters"
              :key="chartitem.id"
              :index="'item-' + chartitem.id"
              @click="changeMain(chartitem.id)"
            >
              {{ chartitem.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { getChapter, getDirectoryList } from "@/api/helpDocument";

export default {
  name: 'Aside',
  props: {
    defaultActiveId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      directoryList: [],
      openedKeys: [],
      activeMenu: '',
    };
  },
  async mounted() {
    try {
      await this.init();
      // 设置 activeMenu 和 openedKeys
      if (this.defaultActiveId) {
        this.activeMenu = 'item-' + this.defaultActiveId;

      }
    } catch (error) {
      console.error('初始化过程中发生错误:', error);
    }
  },
  watch: {
    defaultActiveId(newval) {
      this.activeMenu = 'item-' + newval;
      this.$nextTick(() => {
        this.setOpenedKeys(newval);
      });
    }
  },
  methods: {
    handleSelect(index, indexpath) {
      console.log('Menu selected:', index, indexpath);
    },
    handleOpen(key) {
      console.log('handleOpen:', key);

      if (!this.openedKeys.includes(key)) {
        this.openedKeys = [...this.openedKeys, key];
      }
    },
    handleClose(key) {
      console.log('handleClose:', key);

      this.openedKeys = this.openedKeys.filter(openedKey => openedKey !== key);
    },
    async init() {
      try {
        const directoryRes = await getDirectoryList({ type: 0,system_type:0 });
        this.directoryList = directoryRes.data;

        // 默认展开所有子菜单
        // this.openedKeys = this.directoryList.map(item => 'submenu-' + item.id);

        const chapterRes = await getChapter({ id: 0, type: 0, isInit: true,system_type:0});
        this.activeMenu = 'item-' + chapterRes.data.id;
      } catch (error) {
        console.error('获取数据时发生错误:', error);
      }
    },
    setOpenedKeys(activeId) {
      // 通过 activeId 查找并展开相关的菜单项
      this.directoryList.forEach(item => {
        const isActive = item.chapters.some(chartitem => chartitem.id === parseInt(activeId, 10));
        if (isActive) {
          this.openedKeys = ['submenu-' + item.id];
        }
      });
    },
    changeMain(id) {
      this.$emit('menu-clicked', id);
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  height: 100vh;
}

.content-aside {
  border-right: 1px solid #ccc;
  height: calc(100vh - 110px);
  flex: 0 0 250px;
  overflow-y: auto;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.el-submenu .el-menu-item {
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  min-width: 200px;
}

::v-deep .el-submenu__title {
  height: 45px;
  line-height: 45px;
}

::v-deep .el-menu-item-group__title {
  padding: 0px 0 0px 20px;
  line-height: normal;
  font-size: 12px;
  color: #909399;
}
</style>
